<template>
  <view class="page">
    <my-container :data="businessList" refresh @refresh="getBusinessList">
      <view v-for="(business, index) in businessList" :key="index" class="list-item" @tap="selectBusiness(business)" hover-class="hover-jump">
        <view class="img-box">
          <image :src="business.loginimg" class="img" mode="aspectFill"></image>
        </view>
        <view class="list-item-content">
          <!-- / {{ business.uniacid }} -->
          <view class="title">{{ business.pt_name }} </view>
          <view v-if="business.address" class="content">
            <my-icon name="line-location" size="15" color="#C8CEE1"></my-icon>
            <view class="desc">{{ business.address }}</view>
          </view>
        </view>
      </view>
    </my-container>
  </view>
</template>

<script>
export default {
  data() {
    return {
      businessList: null
    }
  },
  onLoad() {},
  onShow() {
    this.getBusinessList()
  },
  methods: {
    // 选中商家
    selectBusiness(item) {
      const storeSelectuniacid = this.$format(this.$store.getters.selectBusiness, 'selectuniacid')

      if (storeSelectuniacid === item.uniacid) {
        return uni.navigateBack()
      }
      this.$store.dispatch('Business/setSelectBusiness', { ...item, selectuniacid: item.uniacid })
      this.login().then(res => {
        this.$eventHub.$emit('selectBusiness', { ...item, selectuniacid: item.uniacid })
        uni.navigateBack()
      })
    },
    /**
     * 可切换商家列表
     */
    getBusinessList() {
      const baseParam = this.getBase(['token', 'selectuniacid', 'usertoken'])
      if (!baseParam) return
      console.param('可切换商家列表', baseParam)
      this.$api
        .getChangeList(baseParam)
        .then(res => {
          console.res('可切换商家列表', res)
          this.businessList = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('可切换商家列表', err)
          this.errMsg(err, '获取商家列表失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$height: 60px;
.page {
  width: 100%;
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  .list-item {
    @include is-flex(row, space-between, center, nowrap);
    border-bottom: 1px solid #313954;
    padding: 15px 0;
    .img-box {
      // width: 20%;
      width: 70px;
      height: $height;
      background: $imgBg;
      margin-right: 10px;
      border-radius: 3px;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .list-item-content {
      height: $height;
      flex: 1;
      margin-left: 5px;
      font-size: $font-size-xs;
      @include is-flex(column, space-around, flex-start, nowrap);
      .title {
        font-size: $font-size-lg;
        margin-bottom: 5px;
      }
      .content {
        display: flex;
        align-items: center;
        color: $color-primary-grey-text;
        .desc {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
